<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <title>搜索员工</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../../css/public.css" media="all">
    <style>
        .layui-card {border:1px solid #f2f2f2;border-radius:5px;}
        .icon {margin-right:10px;color:#1aa094;}
        .icon-cray {color:#ffb800!important;}
        .icon-blue {color:#1e9fff!important;}
        .icon-tip {color:#ff5722!important;}
        .layuimini-qiuck-module {text-align:center;margin-top: 10px}
        .layuimini-qiuck-module a i {display:inline-block;width:100%;height:60px;line-height:60px;text-align:center;border-radius:2px;font-size:30px;background-color:#F8F8F8;color:#333;transition:all .3s;-webkit-transition:all .3s;}
        .layuimini-qiuck-module a cite {position:relative;top:2px;display:block;color:#666;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;font-size:14px;}
        .welcome-module {width:100%;height:210px;}
        .panel {background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
        .panel-body {padding:10px}
        .panel-title {margin-top:0;margin-bottom:0;font-size:12px;color:inherit}
        .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
        .layui-red {color:red}
        .main_btn > p {height:40px;}
        .layui-bg-number {background-color:#F8F8F8;}
        .layuimini-notice:hover {background:#f6f6f6;}
        .layuimini-notice {padding:7px 16px;clear:both;font-size:12px !important;cursor:pointer;position:relative;transition:background 0.2s ease-in-out;}
        .layuimini-notice-title,.layuimini-notice-label {
            padding-right: 70px !important;text-overflow:ellipsis!important;overflow:hidden!important;white-space:nowrap!important;}
        .layuimini-notice-title {line-height:28px;font-size:14px;}
        .layuimini-notice-extra {position:absolute;top:50%;margin-top:-8px;right:16px;display:inline-block;height:16px;color:#999;}
        .layui-form-item .layui-input-inline {
            float: left;
            width: 100px;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div class="layuimini-container" style="height: 700px">
    <div class="layuimini-main">
            <!-- 搜索条件 -->
            <fieldset class="layui-elem-field">
                <div class="layui-field-box">
                    <!--<div>
                        <button class="layui-btn layui-btn-radius">aa</button>
                    </div>
                    </br>-->
                    <div style="margin-bottom: 0px" class="layui-form-item layui-form-pane">   <!--  每一个这样的div代表一个面板状态 每一个面板会自动换行 -->

                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-inline">
                            <input style="width: 100px" type="text" id="search_staffName" class="layui-input">
                        </div>
                        <label class="layui-form-label">部门</label>
                        <div style="width: 100px" class="layui-input-inline">
                            <select id="search_departmentId" class="layui-input">
                                <option value="">全部</option>
                            </select>
                        </div>
                        <label class="layui-form-label">人员分类</label>
                        <div style="width: 100px" class="layui-input-inline">
                            <select id="search_category" class="layui-input">
                                <option value="">全部</option>
                                <option value="在职人员">在职人员</option>
                                <option value="人才储备">人才储备</option>
                                <option value="离职人员">离职人员</option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-radius layui-btn-warm" id="iReset">重置</button>
                            <button class="layui-btn layui-btn-radius layui-btn-normal" id="searchVal">搜索</button>
                        </div>
                        <div class="layui-input-block">
                            <button style="position: relative;left: -108px" class="layui-btn layui-btn-sm" id="confirmBtn">确定</button>
                            <button style="position: relative;left: -108px" class="layui-btn layui-btn-sm" id="cancelBtn">取消</button>
                        </div>
                    </div>
                </div>
            </fieldset>
            <div>
                <table class="layui-hide" id="test" lay-filter="test"></table>
            </div>
        </div>
</div>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script>
    $(function () {
        sessionStorage.setItem("rowData",null);
        $("#iReset").click(function () {      // 重置
            $("#search_staffName").val("");    // 设置value值
            $("#search_departmentId").val("");
            $("#search_category").val("");
            search();
        });

        $("#searchVal").click(function () {   // 搜索
            var search_staffName = $("#search_staffName").val();   // 获取value值
            var search_departmentId = $("#search_departmentId").val();   // 获取value值
            var search_category = $("#search_category").val();   // 获取value值
            search(search_staffName,search_departmentId,search_category);
        });

        search();
        function search(staffName,departmentId,category) {   // js中默认不认形参的
            layui.use(['form','table','tree'], function(){
                var table = layui.table;
                var form = layui.form;
                var json = {};
                if(staffName != null && staffName !== "") {  // 如果搜索框中，用户传递了搜索值，则添加一个json条件数据
                    json.staffName = staffName;             // js中的动态属性添加
                    // 在json中添加一个key为staffName的值  {staffName: value}
                }
                if(departmentId != null && departmentId !== "") {
                    json.departmentId = departmentId;
                }
                if(category != null && category !== "") {
                    json.category = category;
                }
                // table默认数据渲染和分页处理
                table.render({   // 渲染数据
                    elem: '#test'   // 获取table的id
                    ,url:'/staff/selectForPage'    // 获取json数据
                    ,where:json               // 添加的请求查询参数
                    ,title: '用户数据表'
                    ,cols: [[
                        // 每行中的列字段渲染   cols会根据返回的总条数进行循环处理   相当于我们java中的for循环  每次会把一条完整的json数据传递进来
                        {type: 'radio', fixed: 'left'}
                        ,{field:'id', title:'人员编号',align:'center', width:140, fixed: 'left', unresize: true, sort: true, templet: function(res){
                                return '<em>'+ res.staffId +'</em>'
                            }}
                        ,{field:'staffName', title:'姓名',align:'center', width:220, templet: function(res){
                                return '<em>'+ res.staffName +'</em>'
                            }}
                        ,{field:'department.departmentName', title:'所属部门',align:'center', width:220, templet: function(res){
                                return '<em>'+ res.department.departmentName +'</em>'
                            }}
                        ,{field:'job.jobName', title:'职位',align:'center', templet: function(res){
                                return '<em>'+ res.job.jobName +'</em>'
                            }}
                        ,{field:'job.category', title:'人员分类',align:'center', templet: function(res){
                                return '<em>'+ res.category +'</em>'
                            }}
                    ]]
                    ,height:'466px'
                    ,page: true
                });
                //触发行双击事件
/*                table.on('rowDouble(test)', function(obj){
                    const obj1 = JSON.stringify(obj.data);
                    sessionStorage.setItem("rowData",obj1);
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);//关闭当前页
                    //obj.del(); //删除当前行
                    //obj.update(fields) //修改当前行数据
                    // window.location.href = 'staffDetail.html';
                });*/

                table.on('radio(test)', function(obj){
                    //console.log("当前是否选中状态"+obj.checked); //当前是否选中状态
                    //console.log("选中行的相关数据"+obj.data); //选中行的相关数据
                    //console.log("如果触发的是全选，则为：all，如果触发的是单选，则为：one"+obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
                    //console.log("获取表格中选中行的数据"+table.checkStatus('table-organization').data); // 获取表格中选中行的数据

                    $("#confirmBtn").click(function() {
                        console.log("选中行的相关数据"+JSON.stringify(obj.data)); //选中行的相关数据
                        sessionStorage.setItem("rowData",JSON.stringify(obj.data));
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);//关闭当前页
                    });
                });



                $("#cancelBtn").click(function() {
                    var index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);//关闭当前页
                });
            });
        }
    });
</script>
<script>
    var departmentJSONArray;
    selectDepartment();
    function selectDepartment() {
        $.ajax({   // 异步请求   想象成线程状态
            url:"/department/selectAll",   // 请求路径
            //type:"get",            // 请求的方式，不区分大小写   传递json不能使用get请求，否则返回400错误
            //datatype:"text",
            success:function(response){                        // 后台服务响应成功，自动返回数据
                // console.log("数据为：  "+response.data)
                //console.log(response.data[0].name)
                if(response.code === 200) {
                    departmentJSONArray = response.data;
                    // console.log("信息："+departmentJSONArray.length)
                    // console.log("信息："+departmentJSONArray[0].departmentId)
                    for (let i = 0; i < departmentJSONArray.length; i++) {
                        var departmentJSON = departmentJSONArray[i];
                        $("#search_departmentId").append("<option value='" + departmentJSON.departmentId + "'>" + departmentJSON.departmentName + "</option>");
                    }
                }
            },
            error:function(response){             // 网络请求失败，自动调用此方法
                console.log("出错" + response);
            }
        });
    }
</script>
</body>
</html>
